<template>
	<view class="refund-detail-container">
		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
		</view>
		
		<!-- 错误状态 -->
		<view class="error-container" v-else-if="error">
			<empty text="加载失败，请重试" :show-btn="true" @click="getOrderInfo"></empty>
		</view>
		
		<view v-else class="content-wrapper">
			<!-- 退款状态卡片 -->
			<view class="status-card animate-fade-in">
				<view class="status-content">
					<text class="status-text" :class="statusClass">{{ getStatusText(orderInfo) }}</text>
					<text class="status-time">{{ orderInfo.create_time }}</text>
				</view>
				
				<!-- 退货地址信息 -->
				<view class="return-address slide-up" v-if="orderInfo.status == 1 && orderInfo.refund_type == 2 && orderInfo.step == 3 && orderInfo.refund_address">
					<view class="address-title">请将商品邮寄到以下地址：</view>
					<view class="address-info">
						<view class="address-item" @click="copyText(orderInfo.refund_address.receive_user)" v-if="orderInfo.refund_address.receive_user">
							<uni-icons type="person" size="16" color="#909399"></uni-icons>
							<text class="address-text">收件人：{{ orderInfo.refund_address.receive_user }}</text>
							<uni-icons type="copy" size="14" color="#c0c4cc"></uni-icons>
						</view>
						<view class="address-item" @click="copyText(orderInfo.refund_address.receive_phone)" v-if="orderInfo.refund_address.receive_phone">
							<uni-icons type="phone" size="16" color="#909399"></uni-icons>
							<text class="address-text">电话：{{ orderInfo.refund_address.receive_phone }}</text>
							<uni-icons type="copy" size="14" color="#c0c4cc"></uni-icons>
						</view>
						<view class="address-item" @click="copyText(orderInfo.refund_address.receive_address)" v-if="orderInfo.refund_address.receive_address">
							<uni-icons type="location" size="16" color="#909399"></uni-icons>
							<text class="address-text">地址：{{ orderInfo.refund_address.receive_address }}</text>
							<uni-icons type="copy" size="14" color="#c0c4cc"></uni-icons>
						</view>
					</view>
				</view>
				
				<!-- 拒绝原因 -->
				<view class="reject-reason slide-up" v-if="orderInfo.status == 3 && orderInfo.unrefund_reason">
					<view class="reason-title">拒绝原因：</view>
					<text class="reason-text">{{ orderInfo.unrefund_reason }}</text>
				</view>
			</view>

			<!-- 商品信息卡片 -->
			<view class="card-section animate-slide-up" :style="{ 'animation-delay': '0.1s' }">
				<view class="section-title">
					<uni-icons type="shop" size="18" color="#e93323"></uni-icons>
					<text class="title-text">商品信息</text>
				</view>
				<view class="goods-list">
					<view class="g-item" v-for="(item, index) in orderInfo.order_detail" :key="index">
						<image class="goods-img" :src="item.logo" mode="aspectFill" @click="previewImage(item.logo)"></image>
						<view class="goods-info">
							<text class="goods-title clamp">{{ item.goods_name }}</text>
							<view class="goods-spec" v-if="item.rule != 0">
								<text class="spec-text">{{ item.rule.split('※').join(' ') }}</text>
							</view>
							<view class="price-box">
								<text class="price">￥{{ item.price }}</text>
								<text class="number">x {{ item.apply_refund_num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单信息卡片 -->
			<view class="card-section animate-slide-up" :style="{ 'animation-delay': '0.2s' }">
				<view class="section-title">
					<uni-icons type="list" size="18" color="#e93323"></uni-icons>
					<text class="title-text">订单信息</text>
				</view>
				<view class="info-list">
					<view class="info-item" @click="copyText(orderInfo.order_no)" v-if="orderInfo.order_no">
						<text class="info-label">下单编号</text>
						<view class="info-value-wrapper">
							<text class="info-value">{{ orderInfo.order_no }}</text>
							<uni-icons type="copy" size="14" color="#c0c4cc"></uni-icons>
						</view>
					</view>
					<view class="info-item" v-if="orderInfo.orderInfo && orderInfo.orderInfo.create_time">
						<text class="info-label">下单时间</text>
						<text class="info-value">{{ orderInfo.orderInfo.create_time }}</text>
					</view>
					<view class="info-item" v-if="orderInfo.orderInfo && orderInfo.orderInfo.pay_way">
						<text class="info-label">支付方式</text>
						<text class="info-value">{{ orderInfo.orderInfo.pay_way }}</text>
					</view>
					<view class="info-item" v-if="orderInfo.orderInfo && orderInfo.orderInfo.pay_status">
						<text class="info-label">支付状态</text>
						<text class="info-value">{{ orderInfo.orderInfo.pay_status }}</text>
					</view>
					<view class="info-item" v-if="orderInfo.orderInfo && orderInfo.orderInfo.remark">
						<text class="info-label">买家留言</text>
						<text class="info-value">{{ orderInfo.orderInfo.remark }}</text>
					</view>
				</view>
			</view>
			
			<!-- 收货地址卡片 -->
			<view class="card-section animate-slide-up" :style="{ 'animation-delay': '0.3s' }" v-if="address">
				<view class="section-title">
					<uni-icons type="location" size="18" color="#e93323"></uni-icons>
					<text class="title-text">收货地址</text>
				</view>
				<view class="address-list">
					<view class="info-item" v-if="address.user_name">
						<text class="info-label">收货人</text>
						<text class="info-value">{{ address.user_name }}</text>
					</view>
					<view class="info-item" @click="copyText(address.phone)" v-if="address.phone">
						<view class="info-label">联系电话</view>
						<view class="info-value-wrapper">
							<text class="info-value">{{ address.phone }}</text>
							<uni-icons type="copy" size="14" color="#c0c4cc"></uni-icons>
						</view>
					</view>
					<view class="info-item" @click="copyText((address.province || '') + (address.city || '') + (address.county || '') + (address.detail || ''))" v-if="address.province || address.city || address.county || address.detail">
						<view class="info-label">收货地址</view>
						<view class="info-value-wrapper">
							<text class="info-value address-detail">{{ address.province }}{{ address.city }}{{ address.county }}{{ address.detail }}</text>
							<uni-icons type="copy" size="14" color="#c0c4cc"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 退款金额卡片 -->
			<view class="card-section animate-slide-up" :style="{ 'animation-delay': '0.4s' }">
				<view class="section-title">
					<uni-icons type="wallet" size="18" color="#e93323"></uni-icons>
					<text class="title-text">退款信息</text>
				</view>
				<view class="price-list">
					<view class="info-item">
						<text class="info-label">商品总价</text>
						<text class="info-value">￥{{ orderInfo.order_price }}</text>
					</view>
					<view class="info-item highlight">
						<text class="info-label">退款金额</text>
						<text class="info-value refund-price">￥{{ orderInfo.refund_price }}</text>
					</view>
				</view>
			</view>
			
			<!-- 底部操作区域 -->
			<view class="footer animate-slide-up" :style="{ 'animation-delay': '0.5s' }" v-if="orderInfo.status == 1">
				<view class="action-box">
					<button class="action-btn cancel" @click="cancelRefund()">取消申请</button>
					<button class="action-btn primary" @click="complate()" v-if="orderInfo.refund_type == 2 && orderInfo.step == 3">填写退货</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				refundId: 0,
				orderInfo: {
					orderInfo: {}
				},
				userVipOpen: 0,
				couponOpen: 0,
				address: {},
				loading: true,
				error: false,
				loadingText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		computed: {
			// 状态样式类计算属性
			statusClass() {
				if (!this.orderInfo || this.orderInfo.status === undefined) {
					return 'status-default';
				}
				switch (this.orderInfo.status) {
					case 1: return 'status-pending';
					case 2: return 'status-completed';
					case 3: return 'status-rejected';
					case 4: return 'status-cancelled';
					default: return 'status-default';
				}
			}
		},
		onLoad(option) {
			if (!option.refund_id) {
				this.error = true;
				this.loading = false;
				return;
			}
			this.refundId = option.refund_id;
			this.initData();
		},
		created() {
			uni.$on('refreshData', () => {
				this.getOrderInfo()
			})
		},
		methods: {
			// 初始化数据
			async initData() {
				this.loading = true;
				this.error = false;
				try {
					await Promise.all([
						this.getConfig(),
						this.getOrderInfo()
					]);
				} catch (error) {
					console.error('初始化数据失败:', error);
					this.error = true;
				} finally {
					this.loading = false;
				}
			},
			// 获取基础配置
			async getConfig() {
				try {
					let res = await this.$api.order.getConfig.get();
					this.userVipOpen = res.data.userVip;
					this.couponOpen = res.data.coupon;
				} catch (error) {
					console.error('获取配置失败:', error);
					throw error;
				}
			},
			// 订单信息
			async getOrderInfo() {
				try {
					let res = await this.$api.orderRefund.orderDetail.get({
						refund_id: this.refundId
					});
					
					if (res.code == 0) {
						this.orderInfo = res.data;
						this.address = this.orderInfo.orderInfo.address;
					} else {
						this.$tool.msg(res.msg);
						throw new Error(res.msg);
					}
				} catch (error) {
					console.error('获取订单信息失败:', error);
					this.error = true;
					throw error;
				}
			},
			// 获取状态文本
			getStatusText(orderInfo) {
				if (orderInfo.status == 1) {
					if (orderInfo.refund_type == 2 && orderInfo.step == 3) {
						return '等待退货';
					} else {
						return '商家审核中';
					}
				} else if (orderInfo.status == 2) {
					return '退款已完成';
				} else if (orderInfo.status == 3) {
					return '退款申请被拒绝';
				} else if (orderInfo.status == 4) {
					return '退款申请已取消';
				}
				return '未知状态';
			},
			// 获取状态样式类
			getStatusClass(status) {
				switch (status) {
					case 1: return 'status-pending';
					case 2: return 'status-completed';
					case 3: return 'status-rejected';
					case 4: return 'status-cancelled';
					default: return 'status-default';
				}
			},
			// 获取状态图标
			getStatusIcon(status) {
				switch (status) {
					case 1: return 'clock';
					case 2: return 'checkmarkempty';
					case 3: return 'closeempty';
					case 4: return 'minus';
					default: return 'help';
				}
			},
			// 取消退款订单
			async cancelRefund() {
				uni.showModal({
					title: '提示',
					content: '确定要取消退款申请吗？',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中'
							});
							
							try {
								let res = await this.$api.orderRefund.cancelRefund.get({
									id: this.refundId
								});
								
								uni.hideLoading();
								if (res.code == 0) {
									this.$tool.msg(res.msg);
									setTimeout(() => {
										uni.$emit('refreshData');
										uni.navigateBack(1);
									}, 800);
								} else {
									this.$tool.msg(res.msg);
									setTimeout(() => {
										this.getOrderInfo();
									}, 800);
								}
							} catch (error) {
								uni.hideLoading();
								this.$tool.msg('操作失败，请重试');
								console.error('取消退款失败:', error);
							}
						}
					}
				});
			},
			// 填写收货地址
			complate() {
				uni.navigateTo({
					url: '/pages/refund/refundExpress?refund_id=' + this.refundId
				});
			},
			// 复制文本
			copyText(text) {
				if (!text) {
					this.$tool.msg('无内容可复制');
					return;
				}
				uni.setClipboardData({
					data: text,
					success: () => {
						this.$tool.msg('复制成功');
					},
					fail: () => {
						this.$tool.msg('复制失败');
					}
				});
			},
			// 预览图片
			previewImage(imageUrl) {
				if (!imageUrl) {
					this.$tool.msg('图片地址无效');
					return;
				}
				uni.previewImage({
					urls: [imageUrl],
					current: imageUrl
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
		padding-bottom: 120upx;
	}

	.refund-detail-container {
		padding: 0 0 120upx 0;
	}

	// 加载和错误状态
	.loading-container, .error-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60vh;
	}

	// 状态卡片
	.status-card {
		background: linear-gradient(135deg, #fff, #fff9f9);
		margin: 20upx 24upx;
		border-radius: 20upx;
		padding: 40upx 30upx;
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 200upx;
			height: 200upx;
			background: radial-gradient(circle, rgba(233, 51, 35, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
			border-radius: 50%;
			transform: translate(50%, -50%);
		}

		.status-icon {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20upx;
			
			&.status-pending {
				background: linear-gradient(135deg, #ff976a, #ff6b6b);
			}
			
			&.status-completed {
				background: linear-gradient(135deg, #67c23a, #5daf34);
			}
			
			&.status-rejected {
				background: linear-gradient(135deg, #f56c6c, #e93323);
			}
			
			&.status-cancelled {
				background: linear-gradient(135deg, #909399, #606266);
			}
		}

		.status-content {
			margin-bottom: 20upx;

			.status-text {
				font-size: 36upx;
				font-weight: 600;
				display: block;
				margin-bottom: 10upx;
				
				&.status-pending {
					color: #ff6b6b;
				}
				
				&.status-completed {
					color: #67c23a;
				}
				
				&.status-rejected {
					color: #e93323;
				}
				
				&.status-cancelled {
					color: #909399;
				}
			}

			.status-time {
				font-size: 24upx;
				color: #909399;
			}
		}

		.return-address {
			background: #f8f8f8;
			border-radius: 12upx;
			padding: 20upx;
			margin-top: 20upx;

			.address-title {
				font-size: 28upx;
				color: #303133;
				font-weight: 500;
				margin-bottom: 15upx;
			}

			.address-info {
				.address-item {
					display: flex;
					align-items: center;
					margin-bottom: 10upx;

					&:last-child {
						margin-bottom: 0;
					}

					.address-text {
						font-size: 26upx;
						color: #606266;
						margin-left: 10upx;
					}
				}
			}
		}

		.reject-reason {
			background: #fef0f0;
			border-radius: 12upx;
			padding: 20upx;
			margin-top: 20upx;

			.reason-title {
				font-size: 28upx;
				color: #e93323;
				font-weight: 500;
				margin-bottom: 10upx;
			}

			.reason-text {
				font-size: 26upx;
				color: #606266;
				line-height: 1.5;
			}
		}
	}

	// 通用卡片样式
	.card-section {
		background: #fff;
		margin: 20upx 24upx;
		border-radius: 16upx;
		overflow: hidden;

		.section-title {
			display: flex;
			align-items: center;
			padding: 24upx 30upx;
			background: #fafafa;

			.title-text {
				font-size: 30upx;
				color: #303133;
				font-weight: 500;
				margin-left: 10upx;
			}
		}
	}

	// 商品信息
	.goods-list {
		.g-item {
			display: flex;
			padding: 24upx 30upx;
			border-bottom: 1px solid #f0f0f0;
			transition: background-color 0.3s ease;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background: #f8f8f8;
			}

			.goods-img {
				flex-shrink: 0;
				width: 160upx;
				height: 160upx;
				border-radius: 12upx;
				margin-right: 20upx;
			}

			.goods-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods-title {
					font-size: 30upx;
					color: #303133;
					font-weight: 500;
					line-height: 1.4;
					margin-bottom: 10upx;
				}

				.goods-spec {
					margin-bottom: 15upx;

					.spec-text {
						font-size: 24upx;
						color: #909399;
						background: #f0f0f0;
						padding: 6upx 12upx;
						border-radius: 6upx;
						display: inline-block;
					}
				}

				.price-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						font-size: 32upx;
						color: #e93323;
						font-weight: 600;
					}

					.number {
						font-size: 26upx;
						color: #909399;
						background: #f0f0f0;
						padding: 4upx 12upx;
						border-radius: 12upx;
					}
				}
			}
		}
	}

	// 信息列表
	.info-list, .address-list, .price-list {
		.info-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 30upx;
			transition: background-color 0.3s ease;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background: #f8f8f8;
			}

			&.highlight {
				background: #fff9f9;
			}

			.info-label {
				font-size: 28upx;
				color: #606266;
				flex: 1;
			}

			.info-value {
				font-size: 28upx;
				color: #303133;
				text-align: right;
				flex: 2;
				
				&.address-detail {
					line-height: 1.5;
				}
				
				&.refund-price {
					color: #e93323;
					font-weight: 600;
					font-size: 32upx;
				}
			}
		}
	}

	// 底部操作区域
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
		box-shadow: 0 -2upx 10upx rgba(0, 0, 0, 0.05);
		z-index: 998;
		padding: 20upx 0;
		padding-bottom: env(safe-area-inset-bottom);

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 30upx;

			.action-btn {
				min-width: 180upx;
				height: 72upx;
				margin: 0 0 0 20upx;
				padding: 0 30upx;
				border-radius: 36upx;
				font-size: 28upx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;

				&.cancel {
					background: #f0f0f0;
					color: #606266;
					border: 1px solid #dcdfe6;

					&:active {
						background: #e0e0e0;
						transform: scale(0.98);
					}
				}

				&.primary {
					background: linear-gradient(135deg, #ff6b6b, #e93323);
					color: #fff;
					border: none;

					&:active {
						opacity: 0.9;
						transform: scale(0.98);
					}
				}
			}
		}
	}

	// 通用工具类
	.clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	// 动画效果
	.animate-fade-in {
		animation: fadeIn 0.5s ease-out;
	}

	.animate-slide-up {
		animation: slideUp 0.5s ease-out;
		animation-fill-mode: both;
	}

	.slide-up {
		animation: slideUp 0.3s ease-out;
		animation-fill-mode: both;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(30upx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	// 交互效果增强
	.content-wrapper {
		.card-section {
			transition: transform 0.3s ease, box-shadow 0.3s ease;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 1upx 8upx rgba(0, 0, 0, 0.08);
			}
		}

		.goods-img {
			transition: transform 0.3s ease;

			&:active {
				transform: scale(0.95);
			}
		}

		.info-item {
			.info-value-wrapper {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				uni-icons {
					margin-left: 10upx;
					opacity: 0.6;
					transition: opacity 0.3s ease;
				}

				&:active uni-icons {
					opacity: 1;
				}
			}
		}

		.address-item {
			transition: background-color 0.3s ease;

			&:active {
				background-color: rgba(0, 0, 0, 0.05);
				border-radius: 8upx;
			}

			uni-icons:last-child {
				margin-left: auto;
				opacity: 0.6;
				transition: opacity 0.3s ease;
			}

			&:active uni-icons:last-child {
				opacity: 1;
			}
		}
	}

	// 状态图标动画
	.status-icon {
		transition: transform 0.3s ease;

		&:active {
			transform: scale(0.9);
		}
	}

	// 按钮点击效果
	.action-btn {
		position: relative;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.3);
			transform: translate(-50%, -50%);
			transition: width 0.6s ease, height 0.6s ease;
		}

		&:active::after {
			width: 300upx;
			height: 300upx;
		}
	}
</style>
